<!--
 * @Description: 
 * @Author: Wen
 * @Date: 2024-11-13 19:53:54
 * @LastEditors: Wen
 * @LastEditTime: 2024-11-14 09:39:50
 * 太棒了，又坚持了一天
-->
<template>
    <div class="container">
        <div class="form-container">
      <h2><font color = orange>用户登录</font><br><small><font color="grey">USER LOGIN</font></small></h2>
      <form @submit.prevent="handleSubmit">
        <div class="form-group">
          <label for="username" class="label">用户名</label>
          <input v-model="form.username" type="text" id="username" placeholder="请输入账号" class="input">
        </div>
        <div class="form-group">
          <label for="password" class="label">密码</label>
          <input v-model="form.password" type="password" id="password" placeholder="请输入密码" class="input">
        </div>
        <div class="form-group">
          <label for="captcha">验证码</label>
          <input v-model="form.captcha" type="text" id="captcha" class="input" style="width: 100px;">
          <img src="./captcha-image/验证码1.jpg" alt="captcha-image" height=40px width=80px>
          <!-- <img :src="captchaSrc" alt="Captcha Image" class="captcha-image"> -->
          <a href="#" @click.prevent="refreshCaptcha" style="color: blue;">换一张</a>
        </div>
        
          <button type="submit" class="submit-button" style="font-size: 15px;">登     录</button>
  
      </form>
      <!-- <p class="register-link">没有账号？<a href="#" style="color: pink;" @click.prevent="navigateToRegister">立即注册</a></p> -->
    </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        form: {
          username: '',
          password: '',
          captcha: ''
        },
        captchaSrc: './验证码/验证码1.jpg'
      };
    },
    methods: {
      handleSubmit() {
        if (this.form.username === 'admin' && this.form.password === '1234') {
          alert('登录成功');
        } else {
          alert('用户名或密码错误');
        }
      },
      refreshCaptcha() {
        const captchas = [
          './验证码/验证码1.jpg',
          './验证码/验证码2.jpg',
          './验证码/验证码3.jpg',
          './验证码/验证码4.jpg'
        ];
        this.captchaSrc = captchas[Math.floor(Math.random() * captchas.length)] + '?' + new Date().getTime();
      },
      navigateToRegister() {
        this.$router.push('./Register.vue');
      }
    }
  };
  </script>
  
  <style scoped>
  .container { padding: 20px; }
  .label { display: inline-block; width: 100px; }
  .input { flex: 1; }
  .form-group { display: flex; align-items: center; margin-bottom: 15px; }
  .label, .input, .submit-button, .login-link, .captcha-image, .form-container { color: black; }
  .submit-button { width: 360px; height: 30px; background-color: yellow; }
  .register-link { margin-top: 10px; }
  .captcha-image { width: 150px; height: 40px; }
  .form-container {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 400px;
  max-width: 100%;
    }
  </style>
